/*---------------------------------------------------------------- 
// 文件功能描述：通用混合器、模块样式 
// author：Inthur
// 时间：2018
// 修改标识： 
// 修改描述：
//----------------------------------------------------------------*/

$bg-color:#37b5f4;
$main-color:#02affe;
$border-color:#e0e0e0;
$font-color:#333;

//宽高
@mixin elementSize($w,$h){  
	width: $w;
	height: $h;
}
//旋转
@mixin transformRotate($angle,$x,$y){     
	transform: rotate($angle);
	-ms-transform: rotate($angle);		/* IE 9 */
	-webkit-transform: rotate($angle);	/* Safari and Chrome */
	-o-transform: rotate($angle);		/* Opera */
	-moz-transform: rotate($angle);		/* Firefox */
	transform-origin:$x $y;             //旋转中心
	-ms-transform-origin:$x $y;
	-webkit-transform-origin:$x $y;
	-o-transform-origin:$x $y;
	-moz-transform-origin:$x $y;
}
//flex布局,方向
@mixin flexBox($dire){       
	// display: box;
	display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
	display:-moz-box;     /* Firefox 19 */
	display:-ms-flexbox;
	display:-webkit-flex; /* Chrome */
	display: flex;
	-webkit-justify-content: $dire;
	justify-content: $dire;
	-moz-justify-content: $dire;
	-ms-justify-content: $dire;
	-o-justify-content: $dire; 
	// -webkit-flex-wrap: $wrap;
	// flex-wrap: $wrap;
	// -moz-flex-wrap: $wrap;
	// -ms-flex-wrap: $wrap;
	// -o-flex-wrap: $wrap; 
}

// 居中
@mixin center($p,$t,$l,$x,$y){
	position: $p;
	top: $t;
	left: $l;
	transform: translate($x,$y);
	-webkit-transform: translate($x,$y);	
	// -ms-transform: translate($x,$y);		
	// -o-transform: translate($x,$y);	
	// -moz-transform: translate($x,$y);	
}
//省略号
.ellipsis{
	white-space:nowrap; 
	overflow: hidden;
	text-overflow:ellipsis;
}
.style-boxsize{
	box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.style-shadow{
	box-shadow: 0.1rem 0 rgba(0,0,0,.2);
	-webkit-box-shadow: 0.1rem 0 rgba(0,0,0,.2);
	-moz-box-shadow: 0.1rem 0 rgba(0,0,0,.2);
}
.no-point{
	pointer-events:none;
	-webkit-pointer-events:none;
	-ms-pointer-events:none;
	-moz-pointer-events:none;
}
.scroll{
	overflow: hidden;
	overflow-y: scroll;
	&::-webkit-scrollbar{
		display:none;
	}
	-webkit-overflow-scrolling: touch;
}
.placeholder{
	&::-webkit-input-placeholder{
		color: #666;
	}
	&::-moz-placeholder{
		color: #666;
	}
	&:-moz-placeholder{
		color: #666;
	}
	&:-ms-input-placeholder{
		color: #666;
	}
}
#grad1 {
	background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); /* Safari 5.1 - 6.0 */
	background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));/* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); /* Firefox 3.6 - 15 */
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));/* 标准的语法（必须放在最后） */
	// background-image:linear-gradient(left top, red 100px, yellow 200px);
}

// 公用背景
html,
body,
#app{
	@include elementSize(100%,100%);
}
body{
	font-size: 0.24rem;
    color: #333;
	position: relative;
	// background: $bg-color;
}

.cut{
	@include elementSize(100%,100%);
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}

.no-con{
	text-align: center;
	padding-top: 2rem;
	img{
		@include elementSize(6.2rem,auto);
		margin-bottom: 0.7rem;
	}
	p{
		color: #999;
		font-size: 0.28rem;
		// font-weight: bold;
	}
	&.small{
		padding:0.6rem 0;
		img{
			@include elementSize(4.8rem,auto);
			margin-bottom: 0.7rem;
		}
	}

}
// 公用遮罩
.mask{
	@include elementSize(100%,100%);
	background: rgba(0,0,0,.5); 
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	.mask-con{
		@include center(absolute,50%,50%,-50%,-50%);
	}
	.mask-close{
		@include elementSize(100%,100%);
	}
	.mask-close-btn{
		@include elementSize(0.7rem,0.7rem);
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -0.35rem;
	}
}
// 提示弹层
.alert-mask-body{
	@include elementSize(100%,100%);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3000;
}
.alert-mask{
	padding: 0.5rem;
	@include center(absolute,50%,50%,-50%,-50%);
	background: rgba(0,0,0,.5);
	border-radius: 0.2rem; 
	color: #fff;
    font-size: 0.3rem;
	text-align: center;
}

//底部提示
.bottom-tips{
	font-size: 0.24rem;
	text-align: center;
	color: #ccc;
	line-height: 1;
	padding: 0.22rem 0 0.56rem;
}


// 按钮
.btn{
	background: $main-color;
	color: #fff;
	text-align: center; 
}
// 选中
.chose{
	
}

// 底部加载提示
.t-bottom{
    font-size: 0.22rem;
    text-align: center;
    padding:0.6rem 0 2rem; 
}

//回到顶部
// .goback-box{
// 	position: fixed;
// 	bottom: 0;
// 	right: 0;
// 	z-index: 80;
.goback{
	position: absolute;
	bottom: 2rem;
	right: 0.1rem;
	// z-index: 2000;
	img{
		@include elementSize(0.92rem,1.02rem);  
	}
}
// }

// 滚动条动画
.slide-fade-enter-active {
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
.slide-fade-leave-active {
	transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	-webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter 
//   .slide-fade-leave-to/* .slide-fade-leave-active for below version 2.1.8 */ 
{
	transform: translateY(1rem);
	-webkit-transform: translateY(1rem);
	opacity: 0;
}
.slide-fade-leave-to{
	transform: translateY(-4rem);
	-webkit-transform: translateY(-4rem);
	opacity: 0;
}

//翻页	
.page-enter-active{
	animation-name:fadeInRight;
	animation-duration:.5s;
}
.fade-enter-active{
	animation-name:fadeIn;
	animation-duration:.3s;

}
.fade-leave-active{
	animation-name:fadeOut;
	animation-duration:.3s;

}
.fadedown-enter-active{
    animation-name:fadeInDown;animation-duration:.5s;
}
.fadedown-leave-active{
    animation-name:fadeOutUp;animation-duration:1s;
}

.slideup-enter-active{
    animation-name:slideInUp;animation-duration:.5s;
}
.slideup-leave-active{
    animation-name:slideOutDown;animation-duration:.5s;
}

.bounce-enter-active{
	animation-name:bounceIn;
	animation-duration:.8s;
}

.zoomin-enter-active{
	animation-name:zoomIn;
	animation-duration:.8s;
}

@-webkit-keyframes inLoading {
	from {
		@include transformRotate(0deg,50%,50%)
	}
	to {
		@include transformRotate(360deg,50%,50%)
	}
}

@keyframes inLoading {
	from {
		@include transformRotate(0deg,50%,50%)
	}
	to {
		@include transformRotate(360deg,50%,50%)
	}
}
